<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
    <base href="/KJtest/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>SSM整合考试</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="icon" href="favicon.ico" type="image/ico">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <script>
        function getData(){
            var val = $("#username").val();
            $.getJSON("user/show",{username:val},function (result) {
                /*console.log(result);*/
                $("#tb").empty()
                $(result.data).each(function (i,e) {
                    var $1 = $("<tr id='h"+e.id+"'>\n" +
                        "<td>"+e.id+"</td>\n" +
                        "<td>"+e.username+"</td>\n" +
                        "<td>"+e.truename+"</td>\n" +
                        "\n" +
                        "<td>\n" +
                        "<div class=\"btn-group\">\n" +
                        "<a onclick='edit("+e.id+")' class=\"btn btn-xs btn-default\"  target=\"myframe\" title=\"编辑\" data-toggle=\"tooltip\">编辑</a>\n" +
                        "<a onclick='del("+e.id+")' class=\"btn btn-xs btn-default\"  title=\"删除\" data-toggle=\"tooltip\">删除</a>\n" +
                        "</div>\n" +
                        "</td>\n" +
                        "</tr>");
                    $("#tb").append($1)
                })
            })
        }

        $(function () {
            getData();
        })

        function searc() {
            getData()
        }

        function edit(id) {
            $("#editModal").modal("show")
            /*console.log($("#h" + id + " td:eq(1)").text());*/
            $("#editForm input:eq(0)").val($("#h" + id + " td:eq(0)").text());
            $("#editForm input:eq(1)").val($("#h" + id + " td:eq(1)").text());
            $("#editForm input:eq(2)").val($("#h" + id + " td:eq(2)").text());
        }

        function afteredit() {
            var serialize = $("#editForm").serialize();
            /*console.log(serialize);*/
            $("#editModal").modal("hide")
            $.getJSON("user/update",serialize,function (data) {
                console.log(data);
                if (data.code == 200){
                    alert(data.msg)
                    getData()
                }else {
                    alert(data.msg)
                }
            })
        }

        function del(id) {
            if (confirm("是否删除该数据?")){
                $.getJSON("user/del",{id:id},function (data) {
                    /*console.log(data);*/
                    if (data.code == 200){
                        alert(data.msg)
                        getData()
                    }else {
                        alert(data.msg)
                    }
                })
            }
        }
    </script>
</head>
<body>
<div class="row">
    <div class="col-md-12">
        <ol class="breadcrumb">
            <li><a href="#">系统管理</a></li>
            <li><a href="#">用户管理</a></li>
            <li><a href="#">用户列表</a></li>
        </ol>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <form>
                    <div class="form-group">
                        <label for="username">用户名&nbsp;&nbsp;</label>
                        <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名">&nbsp;&nbsp;
                    </div>
                    <button type="button" class="btn btn-primary" onclick="searc()">搜索</button>
                    <a href="page/update" target="myframe" class="btn btn-info">添加</a>
                </form>

                <hr>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>用户名</th>
                            <th>姓名</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="tb">

                        </tbody>
                    </table>
                </div>


            </div>
        </div>
    </div>
</div>

<%-- 编辑模态框 --%>
<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑用户</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="editForm">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">编号</label>
                        <div class="col-sm-10">
                            <input readonly type="text" name="id" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="username" placeholder="用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" name="truename"  placeholder="姓名">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="afteredit()">修改</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
